<template>
  <div class="keyboard-number">
    <van-tabs v-model="active" :lazy-render="true" :animated="true" line-height="6" color="#0059B3">
      <van-tab :title="`已报到(${finishReportLen(0)})`" :name="0">
        <div class="tab-inside">
          <ReportFinish2 tabKey="0" :devType="devType" :field="field" @handleSignPrint="handleSignPrint" v-if="true"/>
        </div>
      </van-tab>
      <van-tab :title="`已诊结(${finishReportLen(1)})`" :name="1">
        <div class="tab-inside">
          <ReportFinish2 tabKey="1" :devType="devType" :field="field" @handleSignPrint="handleSignPrint" v-if="true"/>
        </div>
      </van-tab>
      <van-tab :title="`未报到(${allowReportLen})`" :name="2">
        <div class="tab-inside">
          <ReportAllow typeInfo="tab" :devType="devType" :field="field" @handleReport="handleReport" @handleReportAll="handleReportAll"/>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {Tab, Tabs} from 'vant';
import ReportAllow from './report-allow.vue';
import ReportFinish2 from './reportFinish2.vue';
import ReportWarnIcon from './report-warn-icon.vue';
import ReportFailIcon from './report-fail-icon.vue';
import ReportSuccessIcon from './report-success-icon.vue';
import ReportSuccessIcon2 from './report-success-icon2.vue';
import {v4 as uuid} from "uuid";

export default {
  name: 'reportResult2',

  components: {
    Tab,
    Tabs,
    ReportAllow,
    ReportFinish2,
    ReportWarnIcon,
    ReportFailIcon,
    ReportSuccessIcon,
    ReportSuccessIcon2,
  },

  props: {
    state: {
      type: Number
    },
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    }
  },

  data() {
    return {
      active: 0,
    }
  },

  computed: {
    // 完成报到列表
    finishReportLen() {
      return function (key) {
        this.widgetKey = uuid();
        let devType = (this.devType);
        let patientInfos = this.$store.getters['getReportPatientInfo'];
        let patientInfo = devType ? (patientInfos.apiData) : (patientInfos.mockData);
        if (patientInfo?.signList?.length) {
          let filterInfo = this.$lodash.filter(patientInfo.signList, {patientDataStatus: String(key)})
          return filterInfo.length;
        } else {
          return 0;
        }
      }
    },

    //允许报到列表
    allowReportLen() {
      let devType = (this.devType);
      let reportPatientInfo = this.$store.getters['getReportPatientInfo'];
      let patientInfos = devType? (reportPatientInfo.apiData) : (reportPatientInfo.mockData)
      return patientInfos?.unSignList.length;
    },

  },

  methods: {
    // 报到
    handleReport(params) {
      this.$emit('handleReport', params);
    },

    // 一键报到
    handleReportAll(params) {
      this.$emit('handleReportAll', params);
    },

    // 打印
    handleSignPrint(params) {
      this.$emit('handleSignPrint', params);
    },

  }
};
</script>

<style lang="scss" scoped>
.keyboard-number {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100%);
  box-sizing: border-box;
  overflow: hidden;

  :deep(.van-tabs) {
    height: 100%;

    .van-tabs__wrap {
      font-size: 24px;
      height: 144px !important;

      .van-tab {
        font-size: 52px;
        line-height: 144px;
        height: 100% !important;
        color: #666F83 !important;

        .van-tab__text {
          display: inline-block;
          height: 100%;
          width: 100%;
          text-align: center;
        }
      }

      .van-tab--active {
        color: #0059B3 !important;
      }

      .van-tabs__line {
        width: calc(100% / 3) !important;
      }
    }

    .van-tabs__content {
      overflow: hidden;
      height: calc(100% - 144px);

      .van-tab__pane {
        overflow: hidden;
        height: 100%;
      }

      .tab-inside {
        height: 100%;
        overflow: auto;
      }
    }
  }
}
</style>